<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>更换头像</title>
    <style>
        #module{
            position: fixed;
            width: 100%;
            height: 100%;
        }
        #myForm{
            position: absolute;
            top: 20%;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 500px;
            padding: 5px;
        }
        #newPhoto{
            font-size: 25px;
            font-weight: bold;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<div id="top"></div>
<div id="module"></div>
<form id="myForm">
    <label id="newPhoto">请选择您的新头像</label>
    <br>
    <input type="file" id="myFile" name="myFile"  accept=".jpg,.png,.gif"/>
    <br><br>
    <button id="uploadBtn">确认</button>
</form>

<script type="text/javascript" src="js/jquery-3.6.4.min.js"></script>
<script type="text/javascript">
    $(function (){
        $("#top").load("top.html")
        // 文件上传按钮点击事件
        let form = $('#myForm')[0];
        $("#uploadBtn").click(function(){
            alert(11111111)
            /*let formData = new FormData();
            let fileInput = $('#file-input')[0];
            let fileName = fileInput.files[0].name; // 获取文件名
            formData.append('file', fileInput.files[0], fileName); // 添加文件到FormData中，并包含文件名*/
            let formData = new FormData(form);
            $.ajax({
                url: "/PDD/user?method=uploadPhoto",
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function(data) {
                    if(JSON.parse(data).code===404){
                        //当前未登录 跳转到登录页面
                        window.location.href="login.html"
                    }else{
                        alert(JSON.parse(data).data);
                    }
                },
                error: function(error) {
                    alert('头像失败: ' + error.message);
                }
            });
        });
    })

</script>
</body>
</html>